const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../', 'build'),
    filename: '[name].[hash:8].js'
  },
  plugins: [
    new CleanWebpackPlugin({
      verbose: true
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './src/assets',
          to: 'static'
        },
        {
          from: './public/favicon.ico',
          to: ''
        }
      ]
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: 'webpack 神奇之旅'
    })
  ],
  module: { // 用来处理各种后缀名不同的文件 ---- 万物皆模块
    rules: [
      {
        test: /\.css$/, // 正则表达式，表示以css为结尾的文件
        use: [ // 解析器解析规则 ---- 从后到前
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        test: /\.scss$/, // 正则表达式，表示以css为结尾的文件
        use: [ // 解析器解析规则 ---- 从后到前
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      },
      {
        test: /\.less$/, // 正则表达式，表示以css为结尾的文件
        use: [ // 解析器解析规则 ---- 从后到前
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' }
        ]
      },
      {
        test: /\.stylus$/, // 正则表达式，表示以css为结尾的文件
        use: [ // 解析器解析规则 ---- 从后到前
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'stylus-loader' }
        ]
      }
    ]
  }
}